<template>
  <div>
    <view class="waterfall_left">
      <view
        class="waterfall_list"
        v-for="(item, index) in goodsLeftList"
        :key="index"
      >
        <image
          class="waterfall_list_img"
          :src="item.url"
          mode="widthFix"
          @load="considerPush"
        />

        <view class="msg-box">
          <view class="name single-omit">{{ item.goods_name }}</view>
          <view class="price-box flex-align-center">
            <view class="unit"><text>￥</text>{{ item.price }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="waterfall_right">
      <view
        class="waterfall_list"
        v-for="(item, index) in goodsRightList"
        :key="index"
      >
        <image
          class="waterfall_list_img"
          :src="item.url"
          mode="widthFix"
          @load="considerPush"
        ></image>

        <view class="msg-box">
          <view class="name single-omit">{{ item.goods_name }}</view>
          <view class="price-box flex-align-center">
            <view class="unit"><text>￥</text>{{ item.price }}</view>
          </view>
        </view>
      </view>
    </view>
  </div>
</template>

<script lang="ts">
export default {
  props: {
    list: { type: Array, required: true },
  },
  data() {
    return {
      // 左侧商品列表
      goodsLeftList: [] as any,
      // 右侧商品列表
      goodsRightList: [] as any,
      // 组件数据备份
      newList: [] as any,
    };
  },
  created() {
    this.touchOff(); // 触发排列
  },
  mounted() {},
  watch: {
    list(newValue, oldValue) {
      this.touchOff();
    },
  },
  computed: {},
  methods: {
    // 触发重新排列
    touchOff() {
      this.newList = [...this.list];
      this.goodsLeftList = [];
      this.goodsRightList = [];
      if (this.newList.length != 0) {
        this.goodsLeftList.push(this.newList.shift()); //触发排列
      }
    },
    // 计算排列
    considerPush() {
      if (this.newList.length == 0) return; //没有数据了
      let leftH = 0,
        rightH = 0; //左右高度
      const query = uni.createSelectorQuery().in(this);
      query.selectAll(".waterfall_left").boundingClientRect();
      query.selectAll(".waterfall_right").boundingClientRect();
      query.exec((res) => {
        leftH = res[0].length != 0 ? res[0][0].height : 0; //防止查询不到做个处理
        rightH = res[1].length != 0 ? res[1][0].height : 0;
        if (leftH == rightH || leftH < rightH) {
          // 相等 || 左边小
          this.goodsLeftList.push(this.newList.shift());
        } else {
          // 右边小
          this.goodsRightList.push(this.newList.shift());
        }
      });
    },
  },
};
</script>

<style scoped>
.waterfall_left {
  width: 40%;
  display: inline-block;
}
.waterfall_right {
  width: 40%;
  display: inline-block;
}

.waterfall_list {
  width: 100%;
}

.waterfall_list_img {
  width: 100%;
}
</style>
